<template>
	<!-- 首页 -->
	<view class="content">
		<musicHeader title = '网易云音乐' :icon = "false"></musicHeader>
	
	<view class="container" style="">
		<!-- 设置滚动区域 -->
		<scroll-view scroll-y="true" >
				<!-- 搜索框 -->
			<view class="search" >
				<!-- #ifdef MP-WEIXIN -->
				<u-icon class="icon-search"  size="40" name="search" style="top: 22px;"></u-icon>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<u-icon class="icon-search"  size="40" name="search"></u-icon>
				<!-- #endif -->
				<u-input class="input-search" style="margin-left: 20px;" @click = "getSeacch" v-model="input.value" :type="input.type" :border="input.border" placeholder='搜索歌曲' :height="input.height" :auto-height="input.autoHeight" />
			</view>
			<!-- 列表 -->
			<view class="list">
<!-- 				<view class="item">
					<view class="item-img">
						<image src="../../static/logo.png" mode=""></image>
						<text>每天更新</text>
					</view>
					<view class="item-list">
						<view>1-与我无关 - 啊冗</view>
						<view>1-与我无关 - 啊冗</view>
						<view>1-与我无关 - 啊冗</view>
					</view>
				</view> -->
				
				<block v-for="(item,index) in toplist" :key =index >
					
					<view class="item" @click="gotoList(item.id)">
						<view class="item-img">
							<image class="images" :src="item.coverImgUrl" mode=""></image>
							<text style="color:#fff">{{item.updateFrequency}}</text>
						</view>
						<view class="item-list" >
							<view v-for="(i,index) in item.tracks" :key=index+1 >{{index+1}}.{{i.first}} -{{i.second}}</view>
							
						</view>
					</view>
				</block>
				
				
			</view>
		</scroll-view>
	</view>
	</view>
	
</template>

<script>
	import musicHeader from '../../components/musicHeader/musicHeader.vue'
	import {toplist} from '../../api/api.js'
	export default {
		components:{
			musicHeader
		},
		data() {
			return {
				input:{
					value: '',
					type: 'text',
					border: true,
					height: 50,
					autoHeight: true,
					
					},
				toplist:[]
				//listId		
			}
		},
		onLoad() {
		toplist().then((res)=>{
			res.splice(4,res.length)
			this.toplist = res
			console.log(res)
			
		})
		},
		methods: {
		gotoList(id){
			//跳转到lis详情页 /playlist/detail
			uni.navigateTo({
				url: `../list/list?id=`+id,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
// 跳转到搜索
		getSeacch(){
				uni.navigateTo({
				url: '../search/search'
				
				
			});
		}
		}
	}
</script>

<style scoped lang="scss">
	scroll-view {
		 margin:35px 30px 0px;
	}
	.search {
		position: relative;
	}
	.input-search {
		padding-left: 30px !important;
		box-sizing: border-box;
		border-radius: 12px;
	}
	.icon-search {
		position: absolute;
		top: 3px;
		left: 2px;
		
	}
	.list {
		width: 100%;
		height: auto;
		margin-top: 50px;
		.item {
			width: 100%;
			height: 210px;
			display: flex;
			// justify-content: space-between;
			
		}
		.item-img {
			width: 152px;
			height: 150px;
			position: relative;
			border-radius: 10px;
			// overflow:hidden ;
		.images {
			width: 152px;
			height: 150px;
			border-radius: 10px;
		}
			text {
				position: absolute;
				left: 15px;
				bottom: 15px;
				
			}
		
		
		}
		.item-list {
			margin-left: 10px;
			
		}
		.item-list view {
				display: block;
				margin-top: 20px;
				font-size: 12px;
				    overflow: hidden;
				    text-overflow: ellipsis;
				    white-space: nowrap;
				    width: 144px;
			}
		
	}
	
</style>
